<template>
  <div class="pd-20">
    <el-form :model="queryData">
      <el-form-item>
        <el-select v-model="queryData.companyIds"
                   clearable
                   filterable
                   multiple
                   placeholder="所属公司">
          <el-option v-for="item in companyList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-input v-model="queryData.hospitalName"
                  class="w-200"
                  clearable
                  placeholder="网点名称"/>
        <el-date-picker
          v-model="signTimes"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="签约开始日期"
          end-placeholder="签约结束日期"
          @change="handleChangeTime()">
        </el-date-picker>
        <el-date-picker
          v-model="orderTimes"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="订单开始日期"
          end-placeholder="订单结束日期"
          @change="handleChangeTime">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-select v-model="queryData.listStatus"
                   class="w-200"
                   clearable
                   multiple
                   placeholder="订单状态">
          <el-option v-for="item in statusList"
                     :key="item.status"
                     :label="item.name"
                     :value="item.status">
          </el-option>
        </el-select>

        <el-select v-model="queryData.type"
                   class="w-200"
                   clearable
                   placeholder="订单类型"
                   @change="handleChangeTime">
          <el-option v-for="item in typeList"
                     :key="item.status"
                     :label="item.name"
                     :value="item.status">
          </el-option>
        </el-select>

        <el-select v-model="queryData.diseasePackageType"
                   class="w-200"
                   clearable
                   placeholder="签约包类型"
                   @change="handleChangeTime">
          <el-option v-for="item in packageTypeList"
                     :key="item.status"
                     :label="item.name"
                     :value="item.status">
          </el-option>
        </el-select>

        <el-button type="primary"
                   @click="handleSelect">查询
        </el-button>
      </el-form-item>
    </el-form>


    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:status="{row}">
        <el-tag v-if="row.status==0">待支付</el-tag>
        <el-tag type="success" v-if="row.status==1">已支付</el-tag>
        <el-tag type="success" v-if="row.status==2">已签约</el-tag>
        <el-tag type="info" v-if="row.status==3">使用中</el-tag>
        <el-tag type="success" v-if="row.status==4">已完成</el-tag>
        <el-tag type="warning" v-if="row.status==5">已退款</el-tag>
        <el-tag type="danger" v-if="row.status==6">已取消</el-tag>
        <el-tag type="danger" v-if="row.status==7">已过期</el-tag>
      </template>
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('detail', row)">详情
        </el-button>
      </template>
    </element-table>

    <el-dialog :visible.sync="showDetailDialog"
               title="详情"
               width="70%"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="detailData"
               label-position="right">
        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">基本信息</span>
        </div>
        <el-form-item>


          <div class="table-layout">
            <el-row>
              <el-col :span="6" class="table-cell-title">订单编号</el-col>
              <el-col :span="6" class="table-cell-title">订单时间</el-col>
              <el-col :span="6" class="table-cell-title">订单状态</el-col>
              <el-col :span="6" class="table-cell-title">签约时间</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="table-cell">{{ detailData.orderNumber }}</el-col>
              <el-col :span="6" class="table-cell">{{ formatterDate(detailData.orderTime) }}</el-col>
              <el-col :span="6" class="table-cell">{{ filterStatus(detailData.status) }}</el-col>
              <el-col :span="6" class="table-cell">{{ formatterDate(detailData.signTime) }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="table-cell-title">下单人</el-col>
              <el-col :span="6" class="table-cell-title">下单人联系电话</el-col>
              <el-col :span="6" class="table-cell-title">管理对象</el-col>
              <el-col :span="6" class="table-cell-title">管理对象联系电话</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="table-cell">{{ detailData.userName }}</el-col>
              <el-col :span="6" class="table-cell">{{ detailData.userPhone }}</el-col>
              <el-col :span="6" class="table-cell" v-if="detailData.member">{{ detailData.member.name }}</el-col>
              <el-col :span="6" class="table-cell" v-if="detailData.member">{{ detailData.member.phone }}</el-col>
            </el-row>

            <el-row>
              <el-col :span="6" class="table-cell-title">订单总金额</el-col>
              <el-col :span="6" class="table-cell-title">预付定金</el-col>
              <el-col :span="6" class="table-cell-title">到店支付</el-col>
              <el-col :span="6" class="table-cell-title">签约主体</el-col>

            </el-row>
            <el-row>
              <el-col :span="6" class="table-cell">{{ detailData.totalPrice }}</el-col>
              <el-col :span="6" class="table-cell">{{ detailData.prepayPrice }}</el-col>
              <el-col :span="6" class="table-cell">{{ detailData.remainPayPrice }}</el-col>
              <el-col :span="6" class="table-cell">{{ detailData.companyName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="table-cell-title">服务网点</el-col>
              <el-col :span="12" class="table-cell-title">网点签约人</el-col>

            </el-row>
            <el-row>
              <el-col :span="12" class="table-cell">{{ detailData.hospitalName }}</el-col>
              <el-col :span="12" class="table-cell">{{ detailData.hospitalUserName }}</el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="套餐包名称:" required style="margin-top: 20px">
          <el-input class="w-200" disabled :value="detailData.diseasePackageName"/>
        </el-form-item>
        <el-form-item label="签约月份数:" required>
          <el-input class="w-200" disabled :value="detailData.month"/>
        </el-form-item>
        <el-form-item label="所选商品/服务:">
          <element-table
            :columns="columnsGoodsList"
            :data="detailData.chronicDiseasePackageOrderDrugDtos">
          </element-table>
        </el-form-item>

        <el-form-item label="特享VIP：">
          <element-table
            :columns="columnsRickList"
            :data="detailData.chronicDiseasePackageOrderHealthCheckDtos">
          </element-table>
        </el-form-item>

        <el-form-item label="三级医院医生服务：">
          <el-tag>已使用次数：{{ detailData.rangeDoctorFinishNumber }}</el-tag>
          <element-table
            :columns="columnsDoctorList"
            :data="detailData.rangeDoctorOrderServices">
            <template v-slot:head="{row}">
              <el-image v-if="row.doctorInfo" :src="row.doctorInfo.headImageUrl"
                        style="border-radius: 50%;width: 100px;height: 100px"></el-image>
            </template>
          </element-table>
        </el-form-item>
        <el-form-item label="用药效果复查:">
          <el-tag>总次数：{{ detailData.detectNumber }}</el-tag>
          <el-tag>已使用次数：{{ detailData.finishDetectNumber }}</el-tag>
        </el-form-item>
        <el-form-item label="必测项:" v-if="detailData.mustDetectNames">
          <el-tag style="margin-right: 10px" v-for="item in detailData.mustDetectNames" :key="item">{{ item }}
          </el-tag>
        </el-form-item>
        <el-form-item label="选测项:" v-if="detailData.anyDetectNames">
          <el-tag style="margin-right: 10px" v-for="item in detailData.anyDetectNames" :key="item">{{ item }}
          </el-tag>
        </el-form-item>


        <el-form-item label="网点面诊医生：" v-if="detailData.faceDoctorOrderService">
          <element-table
            :columns="columnsBranchList"
            :data="detailData.faceDoctorOrderService.doctorInfo">
            <template v-slot:serverWay="{row}">现场咨询问诊</template>
            <template v-slot:times="{row}">不限次/月</template>
          </element-table>
        </el-form-item>

        <el-form-item label="额外权益:" required style="margin-top: 20px" v-if="detailData.packageDto">
          <el-input disabled autosize type="textarea" :value="detailData.packageDto.featuredHighlights"/>
        </el-form-item>

      </el-form>
      <p align="center">

        <el-button @click="showDetailDialog=false"
                   type="info">返回
        </el-button>

      </p>

    </el-dialog>
  </div>
</template>

<script>
import ElementTable from '@/base/ElementTable'

export default {
  name: "index",
  data() {
    return {
      queryData: {
        companyIds: [],
        hospitalName: '',
        signTimeStart: '',
        signTimeEnd: '',
        orderTimeStart: '',
        orderTimeEnd: '',
        listStatus: [],
        type: '',
        diseasePackageType: '',

      },
      companyList: [],
      signTimes: [],//签约时间
      orderTimes: [],//签约时间


      statusList: [
        {name: '待支付', status: 0},
        {name: '已支付', status: 1},
        {name: '使用中', status: 3},
        {name: '已完成', status: 4},
        {name: '已退款', status: 5},
        {name: '已取消', status: 6},
        {name: '已过期', status: 7},
      ],
      typeList: [
        {name: '用户下单', status: 1},
        {name: '医生/店员代下单', status: 2},
      ],
      packageTypeList: [
        {name: '个人类-特价T配', status: 1},
        {name: '个人类-精品U选', status: 2},
        {name: '家庭类-特价T配', status: 3},
        {name: '家庭类-精品U选', status: 4},
      ],
      fileLogoUploadAction: this.api.file.upload,
      fileMaxSize: 1024 * 50,

      showDetailDialog: false,
      loading: false,
      pageTotal: 0,
      pageSize: 20,
      pageIndex: 1,
      tableData: [],
      detailData: {
        orderNumber:'',
        orderTime:'',
        status:'',
        signTime:'',
        userName:'',
        userPhone:'',
        totalPrice:'',
        prepayPrice:'',
        remainPayPrice:'',
        companyName:'',
        hospitalName:'',
        hospitalUserName:'',
        diseasePackageName:'',
        month:'',
        detectNumber:'',
        finishDetectNumber:'',
        rangeDoctorFinishNumber:'',

        member: {
          name:'',
          phone:''
        },
        packageDto: {
          featuredHighlights:''
        },
        faceDoctorOrderService: {doctorInfo: []},
        chronicDiseasePackageOrderDrugDtos: [],
        chronicDiseasePackageOrderHealthCheckDtos: [],
        rangeDoctorOrderServices: [],
        mustDetectNames: [],
        anyDetectNames: []
      },
      columnsGoodsList: [
        {
          label: '药品名称',
          prop: 'companyDrugDto.commonName',
          align: "center",
        }, {
          label: '规格',
          prop: 'companyDrugDto.standard',
          align: "center",
        }, {
          label: '价格',
          prop: 'companyDrugDto.discountPrice',
          align: "center",
        }, {
          label: '数量',
          prop: 'amount',
          align: "center",
        }, {
          label: '厂家',
          prop: 'companyDrugDto.factoryName',
          align: "center",
        }, {
          label: '副作用',
          prop: 'companyDrugDto.sideEffect',
          align: "center",
        }, {
          label: '适应症',
          prop: 'companyDrugDto.indication',
          align: "center",
        }, {
          label: '禁忌',
          prop: 'companyDrugDto.contraindication',
          align: "center",
        }
      ],

      columnsRickList: [
        {
          label: '项目名称',
          prop: 'healthCheckName',
          align: "center",
        }, {
          label: '使用次数',
          prop: 'finishCount',
          align: "center"
        }, {
          label: '价格',
          prop: 'discountPrice',
          align: "center",
        }, {
          label: '数量',
          prop: 'vipHealthCheckNumber',
          align: "center",
        }
      ],
      columnsDoctorList: [
        {
          label: '头像',
          prop: 'head',
          align: "center",
          isSlot: true
        }, {
          label: '姓名',
          prop: 'doctorInfo.nickName',
          align: "center",
        }, {
          label: '职称',
          prop: 'doctorInfo.doctorTitleName',
          align: "center",
        },
        {
          label: '医院名称',
          prop: 'doctorInfo.hospitalName',
          align: "center",
        }
      ],
      columnsBranchList: [
        {
          label: '服务医生',
          prop: 'nickName',
          align: "center",
        }, {
          label: '服务方式',
          prop: 'serverWay',
          align: "center",
          isSlot: true
        }, {
          label: '服务次数',
          prop: 'times',
          align: "center",
          isSlot: true
        }, {
          label: '价值',
          prop: 'tertiaryHospitalFee',
          align: "center",
        }
      ],
      columns: [
        {
          label: '订单编号',
          prop: 'orderNumber',
          align: "center",
        }, {
          label: '订单时间',
          prop: 'orderTime',
          align: "center",
          formatter: (row, cellValue) => {
            return this.formatterDate(row.orderTime)
          },
          width: 150
        }, {
          label: '支付时间',
          prop: 'payTime',
          align: "center",
          formatter: (row, cellValue) => {
            return this.formatterDate(row.payTime)
          },
          width: 150
        }, {
          label: '订单所属公司',
          prop: 'companyName',
          align: "center",
          width: 160
        }, {
          label: '所属网点',
          prop: 'hospitalName',
          align: "center",
          width: 160
        }, {
          label: '订单状态',
          prop: 'status',
          align: "center",
          isSlot: true
        }, {
          label: '订单类型',
          prop: 'type',
          align: "center",
          formatter: (row, cellValue) => {
            return this.filterType(row.type)
          },
        }, {
          label: '套餐包名称',
          prop: 'diseasePackageName',
          align: "center",
          width: 200
        }, {
          label: '套餐包单月价格',
          prop: 'diseasePackagePrice',
          align: "center"
        }, {
          label: '签约月数',
          prop: 'month',
          align: "center"
        }, {
          label: '订单总价',
          prop: 'totalPrice',
          align: "center"
        }, {
          label: '签约人',
          prop: 'userName',
          align: "center"
        }, {
          label: '签约时间',
          prop: 'signTime',
          align: "center",
          formatter: (row, cellValue) => {
            return this.formatterDate(row.signTime)
          },
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true
        }
      ],
      rules: {
        name: [
          {required: true, message: '请输入一级药品名称'}
        ]
      }

    }
  },
  created() {
    this.getCompanyList()
    this.getList()
  },
  components: {
    'element-table': ElementTable
  },
  methods: {
    handleSelect() {
      this.pageIndex = 1
      this.getList()
    },
    handleChangeTime() {
      if (this.signTimes && this.signTimes.length > 0) {
        this.queryData.signTimeStart = this.signTimes[0]
        this.queryData.signTimeEnd = this.signTimes[1]
      } else {
        this.queryData.signTimeStart = ''
        this.queryData.signTimeEnd = ''
      }
      if (this.orderTimes && this.orderTimes.length > 0) {
        this.queryData.orderTimeStart = this.orderTimes[0]
        this.queryData.orderTimeEnd = this.orderTimes[1]
      } else {
        this.queryData.orderTimeStart = ''
        this.queryData.orderTimeEnd = ''
      }
      this.pageIndex = 1
      this.getList()
    },
    //查询公司
    getCompanyList() {
      this.post(this.api.company.companyList, {
        name: '',
        status: 1,
        pageIndex: 0,
        pageSize: 200
      }).then((res) => {
        if (res.data.code === '200') {
          this.companyList = res.data.object
        }
      })
    },
    //查询公司
    getList() {
      this.loading = true
      this.post(this.api.slowDisease.getAdminOrderList, {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
        ...this.queryData
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    //订单详情
    getPackageOrderDetail(id, userId) {
      this.post(this.api.slowDisease.getPackageOrderDetail, {
        id: id,
        userId: userId
      }).then((res) => {
        if (res.data.code === '200') {
          this.detailData=res.data.object
          let mustDetectNames = this.detailData.mustDetectNames;
          if (mustDetectNames) {
            this.detailData.mustDetectNames = mustDetectNames.split(',')
          }
          let anyDetectNames = this.detailData.anyDetectNames;
          if (anyDetectNames) {
          this.detailData.anyDetectNames = anyDetectNames.split(',')
          }
        }
      })
    },

    async handleOption(op, row) {
      switch (op) {
        case 'detail':
          this.showDetailDialog = true
          this.detailData = {}
          this.getPackageOrderDetail(row.id, row.userId)
          break;

      }
    },

    //上传图片错误
    showError(file, fileList) {
      this.$Notice.warning({
        title: '文件大小超限',
        desc: "文件  " + file.name + " 太大，上传文件大小不能超过100M."
      });
    },
    //上传成功
    uploadLogoSuccess(res) {
      if (res.code === '200') {
        this.$message.success('上传成功');
        this.detailData.imageUrl = res.object[0]
      } else {
        this.$message.error('上传失败');
      }
    },
    filterType(type) {
      switch (type) {
        case 1:
          return '用户下单'
          break
        case 2:
          return '医生/店员代下单'
          break
      }
    },
    filterStatus(status) {
      switch (status) {
        case 1:
          return '已支付'
          break
        case 2:
          return '已签约'
          break
        case 3:
          return '使用中'
          break
        case 4:
          return '已完成'
          break
        case 5:
          return '已退款'
          break
        case 6:
          return '已取消'
          break
        case 7:
          return '已过期'
          break
        case 0:
          return '待支付'
          break
      }
    },
    // 时间转换
    formatterDate(time) {
      if (time)
        return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd hh:mm')
      else
        return ''
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  }
}
</script>

<style scoped>
.div-card {
  width: 450px;
}

.card-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #33c99e;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
</style>
